<template>
	<!--图标容器-->
	<el-tabs v-model="activeName" label="历史记录" name="third ">
		<div style="height:300px;width:600px;" id="ecahts-container3" />
	</el-tabs>

</template>

<style>
</style>

<script>
import extend from './js/extend'
// 引入echats依赖
import echarts from 'echarts'
extend(echarts)
export default {
  mounted: function () {
    this.init()
  },

  methods: {
    init: function History () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('ecahts-container3'), 'essos')

      // 指定图表的配置项和数据

      var base = +new Date(2017, 1, 1)
      var oneDay = 24 * 3600 * 1000
      var date = []

      var data = [Math.random() * 300]

      for (var i = 1; i < 450; i++) {
        var now = new Date(base += oneDay)
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      }

      let option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        title: {
          left: 'center',
          text: '历史数据'
        },
        // toolbox: {
        //   feature: {
        //     dataView: {
        //       show: true,
        //       readOnly: false
        //     },
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        // dataZoom: [{
        //   type: 'inside',
        //   show: false,
        //   start: 0,
        //   end: 10
        // }, {
        //   start: 0,
        //   end: 10,
        //   handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        //   handleSize: '80%',
        //   handleStyle: {
        //     color: '#fff',
        //     shadowBlur: 3,
        //     shadowColor: 'rgba(0, 0, 0, 0.6)',
        //     shadowOffsetX: 2,
        //     shadowOffsetY: 2
        //   }
        // }],
        series: [{
          name: '模拟数据',
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            normal: {
              color: 'rgb(255, 70, 131)'
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(255, 158, 68)'
              }, {
                offset: 1,
                color: 'rgb(255, 70, 131)'
              }])
            }
          },
          data: data
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }

  },
  data () {
    return {
      activeName: 'first',
      // 表格中假数据
      tableData2: [
        {
          date: '01',
          month1: '23.1',
          month2: '21.1',
          month3: '22.3',
          month4: '21.5'
        },
        {
          date: '02',
          month1: '23.1',
          month2: '21.1',
          month3: '22.3',
          month4: '21.5'
        },
        {
          date: '03',
          month1: '23.1',
          month2: '21.1',
          month3: '22.3',
          month4: '21.5'
        },
        {
          date: '04',
          month1: '23.1',
          month2: '21.1',
          month3: '22.3',
          month4: '21.5'
        },
        {
          date: '05',
          month1: '23.1',
          month2: '21.1',
          month3: '22.3',
          month4: '21.5'
        },
        {
          date: '06',
          month1: '23.1',
          month2: '21.1',
          month3: '22.3',
          month4: '21.5'
        }
      ]
    }
  }
}
</script>
